<template>
  <div style="" class="toolbox">
    <div class="toolboxitem" title="服务分发">
      <img :src="'/assets/fenxi/gongxiang.png'" alt=""
           style="margin:10px 10px;width: 30px;filter: invert(100%) brightness(550%);"
           @click.stop="panneladd('linepannel')">
    </div>
    <div :class="showTimeLine ? 'toolboxitem active' : 'toolboxitem'" title="时间轴">
      <img :src="'/assets/fenxi/zhongbiao.png'" alt=""
           style="margin:10px 10px;width: 30px;filter: invert(100%) brightness(550%);"
           @click.stop="handShowTime">
    </div>
    <div class="toolboxitem" title="服务分发">
      <img :src="'/assets/fenxi/gongxiang.png'" alt=""
           style="margin:10px 10px;width: 30px;filter: invert(100%) brightness(550%);"
           @click.stop="panneladd('serviceFf')">
    </div>
    <!-- <div class="toolboxitem" title="镶嵌线配置">
      <img :src="'/assets/fenxi/xqx.png'" alt=""
           style="margin:10px 10px;width: 30px;filter: invert(100%) brightness(550%);"
           @click.stop="panneladd('embedding')">
    </div> -->
    <div class="toolboxitem" title="条件查询">
      <img :src="'/yxrh/sousuo.png'" alt=""
           style="margin:10px 10px;width: 30px;filter: invert(100%) brightness(550%);"
           @click.stop="panneladd('yxsearchpannel')">
    </div>
    <!-- <div class="toolboxitem" title="测量">
      <img :src="'/assets/fenxi/juli.png'" alt=""
        style="margin:15px 10px;width: 30px;filter: invert(100%) brightness(550%);"
        @click.stop="panneladd('meaturepannel')">
    </div> -->
    <!-- <div class="toolboxitem" title="标绘">
      <img :src="'/assets/fenxi/dianwei.png'" alt=""
        style="margin:10px 10px;width: 30px;filter: invert(100%) brightness(550%);" @click.stop="panneladd('plotpannel')">
    </div> -->
    <div class="toolboxitem" title="场景和网格">
      <img :src="'/assets/fenxi/jingweiwangge.png'" alt=""
        style="margin:10px 10px;width: 30px;filter: invert(100%) brightness(550%);"
        @click.stop="panneladd('scenepannel')">
    </div>
    <div class="toolboxitem" title="图层">
      <img :src="'/assets/fenxi/tuceng.png'" alt=""
        style="margin:10px 10px;width: 30px;filter: invert(100%) brightness(550%);"
        @click.stop="panneladd('layerpannel')">
    </div>
    <!-- <div class="toolboxitem" title="图层">
      <el-tooltip placement="left">
        <template #content>
          <layercom />
        </template>
      <img :src="'/assets/fenxi/tuceng.png'" alt="" style="margin:10px 10px;width: 30px;filter: invert(100%) brightness(550%);">
      </el-tooltip>
    </div> -->
  </div>
</template>

<script lang="ts" setup>

import meaturepannel from '../pannel/meature/index.vue'
import plotpannel from '../pannel/plot/index.vue'
import scenepannel from '../pannel/scene/index.vue'
import layercom from '../pannel/layer/index.vue'
import layerpannel from '../pannel/layer/index.vue'

import { useEarthStore } from '@/stores/earth'
import {onMounted, nextTick, ref, onUnmounted, computed} from 'vue'

const props = defineProps({
  toolboxOptions: {
    type: Object,
    default: () => ({
      top: 100,
      right: 400
    })
  }
})
const showTimeLine = computed(()=>{
  return earthStore.showTimeLine
})
const earthStore = useEarthStore()
const handShowTime = function () {
  earthStore.showTimeLine = !earthStore.showTimeLine
}
let panneladd = (type: any) => {

  switch (type) {
    case 'meaturepannel':
      earthStore.pannellist[type] = {
        name: 'meature-pannel',
        options: props.toolboxOptions
      }
      break;
    case 'plotpannel':
      earthStore.pannellist[type] = {
        name: 'plot-pannel',
        options: props.toolboxOptions
      }
      break;
    case 'scenepannel':
      earthStore.pannellist[type] = {
        name: 'scene-pannel',
        options: props.toolboxOptions
      }
      break;
    case 'layerpannel':
      earthStore.pannellist[type] = {
        name: 'layer-pannel',
        options: props.toolboxOptions
      }
      break;
    case 'downLoad':
      earthStore.pannellist[type] = {
        name: 'downLoad-pannel',
        options: {
          top: 100,
          right: 1300
        }
      }
      break;
    case 'embedding':
      earthStore.pannellist[type] = {
        name: 'embedding-pannel',
        options: {
          top: 100,
          right: 1300
        }
      }
      break;
    case 'serviceFf':
      earthStore.pannellist[type] = {
        name: 'serviceFf-pannel',
        options: {
          top: 100,
          right: 1300
        }
      }
      break;
    case 'yxsearchpannel':
      earthStore.pannellist[type] = {
        name: 'yxsearch-pannel',
        options: {
          top: 100,
          left: 50
        }
      }
      break;
    case 'linepannel':
      earthStore.pannellist[type] = {
        name: 'line-pannel',
        options: {
          top: 100,
          left: 50
        }
      }
      break;
    default:
      break;
  }

}
</script>
<style lang="scss" scoped>
.toolboxitem {
  width: 50px;
  height: 50px;
  background-color: #1d1d1dab;
  border-radius: 25px;
  margin: 10px 0px;
  pointer-events: auto;
  cursor: pointer;

  &:hover {
    background-color: #1d1d1d;
  }
}
.active {
  background-color: rgba(0, 157, 255, 0.5);
  &:hover {
    background-color: rgba(0, 157, 255, 0.5);
  }
}
.toolbox {
  position: absolute;
  bottom: 60px;
  right: 30px;
}</style>
